<template>
  <div>
    <el-table-v2 :columns="tableRowData" :data="(tableData)" :width="width" :height="height" :estimated-row-height="31"
      :header-height="32" fixed :v-scrollbar-size="0"><template #empty>
        <div class="flex items-center justify-center h-100%"></div>
      </template>
    </el-table-v2>
    <el-table  :data="(tableData)" :width="width" :height="height">
      

    </el-table>

    <el-button @click="loadData">加载数据</el-button>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import data5000 from "../assets/data5000.json"
console.log(data5000);

const width = ref(1920);
const height = ref(300);
const tableData = reactive([]);

const tableRowData = reactive([
{
    "name": "displayName",
    "key": "displayName",
    "dataKey": "id",
    "title": "id",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "displayName",
    "displayName": "名称",
    "key": "displayName",
    "dataKey": "displayName",
    "title": "名称",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "type",
    "displayName": "类型",
    "key": "type",
    "dataKey": "type",
    "title": "类型",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "show",
    "displayName": "输出",
    "key": "id",
    "dataKey": "show",
    "title": "输出",
    "flag": 259,
    "width": 389.75,
  },
  {
    "name": "address",
    "displayName": "地址",
    "flag": 256,
    "key": "path",
    "dataKey": "path",
    "title": "地址",
    "width": 389.75,
  }
]); // 列表显示的列

// 开始加载数据
const loadData = () => {
  data5000.forEach(item => {
    tableData.push(item)
  })
}

</script>
<style lang="scss" scoped></style>